<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/vue.js"></script>
		<title>demo3-11</title>
			<style>
				.rect{display: flex;width: 400px;height: 200px;background-color: #e45757;}
				.blue{width: 100px;height: 100px;background: blue;}
				.yellow{width: 100px;height: 100px;background: yellow;}	
			</style>
		</head>
		<body>
			<div id="app">
				<div class="rect" v-on:click="alertRed">
				   <div class="blue" v-on:click="alertBlue">我是蓝色区域</div>
				   <div class="yellow" v-on:click.stop="alertYellow">我是黄色区域</div>
			</div>
		</div>
	    </body>
		<script>
			var vm = new Vue({
				el:'#app',
				data:{},
				methods:{
					alertBlue:function(){
						console.log("blue");
					},
					alertYellow:function(){
						console.log("yellow");
					},
					alertRed:function(){
						console.log("red");
					}
				}
			})	
		</script>
    </html>